<template>
  <div ref="Chart" style="height: 100%"/>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  props: {
    fontData: {
      type: Object,
      default: () => {}
    },
    //  fontData: {
    //     fontY: '85%',内容Y轴偏移量
    //     content: '26m',内容
    //     fill: '#E1E3E6',字体颜色
    //     fontSize: 16,字体大小
    //   },
    scaleColor: {
      typeof: String,
      default: () => ''
    }
    // scaleColor:'#00E0F1',已拥有的刻度颜色
  },
  data() {
    return {
      Chart: null
    };
  },
  mounted() {
    this.inChart();
  },
  methods: {
    inChart() {
      const data = [
        { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
        { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
        { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
        { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
        { name: 'London', 月份: 'May', 月均降雨量: 47 },
        { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
        { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
        { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
        { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
        { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
        { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
        { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
        { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
        { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
        { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
        { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
        { name: 'add', 月份: 'Jan.', 月均降雨量: 12 },
        { name: 'add', 月份: 'Feb.', 月均降雨量: 23 },
        { name: 'add', 月份: 'Mar.', 月均降雨量: 34 },
        { name: 'add', 月份: 'Apr.', 月均降雨量: 99 },
        { name: 'add', 月份: 'May', 月均降雨量: 52 },
        { name: 'add', 月份: 'Jun.', 月均降雨量: 35 },
        { name: 'add', 月份: 'Jul.', 月均降雨量: 37 },
        { name: 'add', 月份: 'Aug.', 月均降雨量: 42 }
      ];
      const ref = this.$refs.Chart;

      this.Chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });

      this.Chart.data(data);
      this.Chart.scale('月均降雨量', {
        nice: true
      });
      this.Chart.tooltip({
        shared: true,
        showMarkers: false
      });
      this.Chart.legend({
        position: 'top',
        custom: false,
        items: [
          {
            name: '能量等级',
            marker: { symbol: 'square', style: { r: 4, fill: '#fff' }}
          },
          {
            name: 'London',
            id: 'London',
            value: 'name',
            marker: { symbol: 'square', style: { r: 4, fill: 'red' }}
          },
          {
            name: 'London',
            id: 'London',
            value: 'name',
            marker: { symbol: 'square', style: { r: 4, fill: 'red' }}
          },
          {
            name: 'London',
            id: 'London',
            value: 'name',
            marker: { symbol: 'square', style: { r: 4, fill: 'red' }}
          }
        ]
      });

      this.Chart.on('legend-item:click', (ev) => {
        const target = ev.target;
        const delegateObject = target.get('delegateObject');
        const item = delegateObject.item;

        let showLegend = [];
        for (let i = 0; i < delegateObject.legend.get('items').length; i++) {
          if (!delegateObject.legend.get('items')[i].unchecked) {
            showLegend.push(delegateObject.legend.get('items')[i].id);
          }
        }
        showLegend = [...showLegend];
        this.Chart.filter(item.value, (value) => {
          if (value === undefined) {
            return true;
          } else {
            return showLegend.includes(value);
          }
        });
        this.Chart.changeData(data);
      });
      this.Chart.interval().position('月份*月均降雨量').color('name').adjust('stack');

      this.Chart.interaction('active-region');

      this.Chart.render();
    }
  }
};
</script>
